<!--
将form和table进行关联统一管理
整体页面结构
丨————————————————丨
丨————查询表单————丨
丨                丨
丨——————表格——————丨
丨                丨
丨——————分页——————丨
丨————————————————丨
使用VUE inject+provide 实现个个组件之间的联系
可以自定义每个单独页面表单的回调（想要使用页面整体回调，页面需要引入provide.js传入当前页面vue实例|this）
例如：
表单数据绑定前的回调 formDataBindBefore
表单数据绑定后的回调 formMounted
表单字段值发生变化时的回调 formDataChange
表格渲染完毕后的回调 tableMounted
-->

<template>
  <div class="app-container">
    <z-form
      :inline="inline"
      ref="form"
      :formList="formList"
      :showLabel="showLabel"
      :colLayout="colLayout"
      @search="search"
      @recharge="recharge"
      :isReadonly="isReadonly"
      :formData="formData"
      @formDataChange="formDataChange"
      :formMounted="formMounted"
      :showButton="showButton"
      :formDataBindBefore="formDataBindBefore"
      :formHideField="formHideField"
    ></z-form>

    <slot name="content"></slot>
    <z-button v-if="$slots.button">
      <slot name="button"></slot>
    </z-button>
    <z-table
      ref="table"
      :rowKey="rowKey"
      :selection="selection"
      :sequence="sequence"
      :total="total"
      :tableMounted="tableMounted"
      :tableList="tableList"
      :tableData="tableData"
      :isReadonly="isReadonly"
      :checkBoxDisable="checkBoxDisable"
      :height="height"
      :isShowPagination="isShowPagination"
      @paginationChange="paginationChange"
      :tableHideField="tableHideField"
    >
      <template v-slot:first>
        <slot name="first"></slot>
      </template>
      <template v-slot:last>
        <slot name="last"></slot>
      </template>
    </z-table>
  </div>
</template>

<script>
import ZButton from "../Button/index.vue";
import ZForm from "../Form/form-groud/index";
import ZTable from "../Table/index.vue";
import Inject from "../mixin/inject";
export default {
  mixins: [Inject],
  props: {
    rowKey: String,
    showLabel: Boolean,
    colLayout: Boolean,
    checkBoxDisable: {
      type: Function, //当前选中框的禁用事件
      default: null,
    },
    showButton: {
      type: Boolean,
      default: true,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    tableMounted: Function,
    formMounted: Function,
    formDataBindBefore: Function,
    formHideField: { type: Array, default: () => [] },
    tableHideField: { type: Array, default: () => [] },
    isShowPagination: {
      type: Boolean,
      default: true,
    },
    height: String,
    inline: {
      type: Boolean,
      default: true,
    },
    isReadonly: {
      type: Boolean,
      default: false,
    },
    formList: {
      type: Array,
      default: () => [],
    },
    tableList: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    selection: {
      type: Boolean,
      default: false,
    },
    sequence: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    //表单实例
    form() {
      return this.$refs.form;
    },
    //表格实例
    table() {
      return this.$refs.table;
    },
    // 分页信息
    pageInfo() {
      return this.$refs.table.getPage;
    },
    // 获取表单整体数据
    getFormData() {
      return this.$refs.form.getFormData;
    },
    // 获取表格选中项
    getSelectList() {
      return this.$refs.table.getSelectList;
    },
    // 获取表格当前选中项
    getCurSelectData() {
      return this.$refs.table.selectRow;
    },
  },
  watch: {},
  components: {
    ZButton,
    ZTable,
    ZForm,
  },
  mounted() {},
  created() {},
  methods: {
    // 查询
    search() {
      if (!this.$refs.form.validate()) {
        this.$message.warning("请输入正确的查询条件");
        return;
      }
      this.$emit("search");
    },
    paginationChange() {
      this.$emit("paginationChange");
    },
    formDataChange() {
      if (this.$refs.table) {
        this.$refs.table.pageNum = 1;
      }
    },
    filter() {
      let filter = this.$refs.form.getFormData;
      Object.keys(this.$refs.form.getFormData).forEach((item) => {
        if (filter[item]) {
          filter[item] = filter[item].trim();
        }
      });
      return {
        ...this.$refs.table.getPage,
        ...filter,
      };
    },
    recharge() {
      this.$refs.form.recharge();
      this.$refs.table.recharge();
      this.$emit("recharge");
    },
  },
};
</script>
